<script setup>
import {onMounted, ref} from "vue";
import {useRouter} from "vue-router";
import FooterBar from "@/components/FooterBar.vue";
import ThemeChange from "@/components/ThemeChange.vue";
import {httpGet} from "@/utils/http.js";
import {ElMessage} from "element-plus";
import {checkSession, getSystemInfo} from "@/store/cache.js";
import {isMobile} from "@/utils/libs.js";

const router = useRouter()

// 判断是不是移动端设备访问
if (isMobile()) {
  router.push('/mobile/index')
}

// 网站标题
const title = ref('')
// logo 地址
const logo = ref('')
// 网站标语
const slogan = ref('')

// 是否登录
const isLogin = ref(false)
const docsURL = ref(import.meta.env.VITE_VUE_APP_DOCS_URL)
const gitURL = ref(import.meta.env.VITE_VUE_APP_GIT_URL)
// 导航数据
const navs = ref([])
// url 映射对应的 图标
const iconMap = ref({
  "/chat": "icon-chat",
  "/mj": "icon-mj",
  "/sd": "icon-sd",
  "/dalle": "icon-dalle",
  "/images-wall": "icon-image",
  "/suno": "icon-suno",
  "/xmind": "icon-xmind",
  "/apps": "icon-app",
  "/member": "icon-vip-user",
  "/invite": "icon-share",
  "/luma": "icon-luma",
  "/powerLog": "icon-log",
})

const displayedChars = ref([])
const initAnimation = ref('')
let timer = null // 定时器句柄

// 初始化间隔时间和随机时间数组
const interTime = ref(50)
const interArr = [90, 100, 70, 88, 80, 110, 85, 400, 90, 99];

onMounted(() => {
  // 获取系统配置
  getSystemInfo().then(res => {
    title.value = res.data.title
    logo.value = res.data.logo
    slogan.value = res.data.slogan
    if (timer) clearInterval(timer) // 清除定时器
    timer = setInterval(setContent, interTime.value)
  }).catch(e => {
    ElMessage.error('获取系统配置信息出现错误：' + e.message)
  })

  // 获取菜单数据
  httpGet('api/menu/list?index=1').then(res => {
    navs.value = res.data
  }).catch(e => {
    ElMessage.error('获取导航菜单数据失败：' + e.message)
  })
  // 检测是否登录
  checkSession().then(() => {
    isLogin.value = true
  }).catch(() => {
  })
})

// 打字机内容逐字符显示
const setContent = () => {
  if (initAnimation.value.length >= slogan.value.length) {
    // 文本已全部输出
    initAnimation.value = ''
    displayedChars.value = []
    if (timer) clearInterval(timer)
    timer = setInterval(setContent, interTime.value)
    return
  } else {
    const nextChar = slogan.value.charAt(initAnimation.value.length)
    initAnimation.value += slogan.value.charAt(initAnimation.value.length) // 逐字符追加
    displayedChars.value.push(nextChar)
    interTime.value = interArr[Math.floor(Math.random()) * interArr.length] // 设置随机间隔
    if (timer) clearInterval(timer)
    timer = setInterval(setContent, interTime.value)
  }
}

// 计算彩虹颜色
const rainbowColor = (index) => {
  const hue = (index * 40) % 360 // 每个字符间隔40度，形成彩虹色
  return `hsl(${hue},90%, 50%)` // // 色调(hue)，饱和度(70%)，亮度(50%)
}

</script>

<template>
  <div class="index-page">
    <ThemeChange/>
    <div class="menu-box">
      <el-menu mode="horizontal" :ellipsis="false">
        <div class="menu-item">
          <el-image :src="logo" class="logo" alt="Geek-AI"/>
        </div>
        <div class="menu-item">
          <span>
            <el-tooltip class="box-item" content="部署文档" placement="bottom">
              <a :href="docsURL" class="link-button mr-2" target="_blank">
                <i class="iconfont icon-book"></i>
              </a>
            </el-tooltip>

            <el-tooltip class="box-item" content="项目源码" placement="bottom">
              <a :href="gitURL" class="link-button" target="_blank">
               <i class="iconfont icon-github"></i>
              </a>
            </el-tooltip>
          </span>
          <span v-if="!isLogin">
            <el-button @click="router.push('/login')" class="btn-go animate__animated animate__pulse animate__infinite" round>登录/注册</el-button>
            <el-button @click="router.push('/admin')" class="btn-go animate__animated animate__pulse animate__infinite" round>后台</el-button>
          </span>
        </div>
      </el-menu>
    </div>
    <div class="content">
      <div style="height: 158px"></div>
      <h1 class="animate__animated animate__backInDown">{{title}}</h1>
      <div class="msg-text cursor-ani">
        <span v-for="(char,index) in displayedChars" :key="index" :style="{ color: rainbowColor(index) }">
          {{char}}
        </span>
      </div>
      <div class="navs animate__animated animate__backInDown">
        <el-space wrap :size="14">
          <div v-for="item in navs" :key="item.url" class="nav-item-box" @click="router.push(item.url)">
            <i :class="'iconfont ' + iconMap[item.url]"></i>
            <div>{{item.name}}</div>
          </div>
        </el-space>
      </div>
    </div>
    <footer-bar/>
  </div>
</template>

<style scoped lang="stylus">
@import "../assets/css/index.styl"
</style>